<template>
	<div style="position: relative">
		<svg
			style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto"
			width="84px"
			height="84px"
			x-mlns="http://www.w3.org/200/svg"
			fill="#ffffff"
		>
			<circle cx="40" cy="40" :r="innerRadius" :stroke="color" stroke-width="1" fill="" />
			<circle
				cx="40"
				cy="40"
				:r="radius"
				:stroke="color"
				stroke-width="12"
				fill="transparent"
				:stroke-dasharray="circumference"
				:stroke-dashoffset="progressLength"
			/>
			<circle cx="40" cy="40" :r="outerRadius" :stroke="color" stroke-width="1" fill="transparent" />
		</svg>
		<div class="textCenter" :style="{ color: color }">{{ props.progress }}%</div>
	</div>

	<!-- <div class="subTextCenter">
     入组率
    </div> -->
</template>

<script lang="ts" setup>
import { defineProps, computed,toRefs } from 'vue'

let props = defineProps({
	progress: {
		type: Number,
		default: ''
	},
	color: {
		type: String,
		default: ''
	},
	height: {
		type: String,
		default: ''
	},
	width: {
		type: String,
		default: ''
	},
	left: {
		type: String,
		default: ''
	},
	right: {
		type: String,
		default: ''
	},
	radius: {
		type: Number,
		default: 65
	}
})
const SIZE = 80
const STROKEWIDTH = 12
const { progress} = toRefs(props) 
// 半径
const radius = computed(() => {
	return (SIZE - STROKEWIDTH) / 2
})
//内环半径
const innerRadius = computed(() => {
	return radius.value - STROKEWIDTH / 2 
})
//外环半径
const outerRadius = computed(() => {
	return radius.value + STROKEWIDTH / 2 - 1
})

// 圆周长
const circumference = computed(() => {
	return 2 * Math.PI * radius.value
})
// 进度长度
const progressLength = computed(() => {
	return (1 - Number(progress.value) / 100) * circumference.value
})
</script>
<style lang="scss" scoped>
.textCenter {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin:auto;
	text-align: center;
	width: 85px;
	height: 23px;
	font-weight: bold;
	color: #ffffff;
  font-size: 14px;
}
.subTextCenter {
	width: 300px;
	height: 100px;
	position: absolute;
	left: 0;
	right: 0;
	top: 55%;
	margin: auto;
	text-align: center;
	width: 65px;
	height: 23px;
	font-weight: bold;
	color: rgba(0, 222, 255, 1);
}
</style>
